/**
* @作者:晋尧
* @创建时间：2021/7/13
* @修改时间：2021/7/16
*/

<template>
	<view class="main">
		<!-- 头部导航栏 -->
		<view class="header">
			<img src="/static/xiangzulogo.png" style="width: 176rpx; height: 99rpx;" fit="cover" class="logo"
				@click="jumpToMain">
			<view class="navitems">
				<view class="navitem" @click="jumpToUserLogin">用户登录</view>
				<view @click="jumpToAdminLogin" class="navitem">管理员登录</view>
			</view>
		</view>
		<!-- 网页内容 -->
		<view class="content">
			<view class="image_container">
				<view class="image_box">
					<img src="/static/image/login2.png" class="image" />
				</view>
			</view>
			<!-- 登陆框 -->
			<view class="login_container">
				<view class="login_box">
					<view class="loginName">
						<h2 style="text-align: center">厂商登录</h2>
					</view>
					<view class="login">
						<el-tabs v-model="activeName" @tab-click="handleClick">
							<el-tab-pane label="手机密码登录" name="first" class="loginItem">
								<view class="userMobile">
									<p class="tips">手机号：</p>
									<el-input v-model="userMobile1" placeholder="请输入手机号"></el-input>
								</view>
								<view class="userPassword">
									<p class="tips">密码：</p>
									<el-input placeholder="请输入密码" v-model="userPassword1" size="large" show-password>
									</el-input>
								</view>
								<view class="signIn">
									<el-button type="primary" style="width: 100%;height: 100rpx;" @click="signInMobile">登录</el-button>
								</view>
								<view class="signUp">
									<div class="forgetPassword">
										<!-- <el-button type="text" class="forgetPasswordButton">忘记密码</el-button> -->
									</div>
									<div class="signUpMsg">还没有账号？</div>
									<el-button type="text" class="signUpButton" @click="jumpToRegister">点击注册</el-button>
								</view>
							</el-tab-pane>
							<el-tab-pane label="邮箱密码登录" name="third" class="loginItem">
								<view class="userMobile">
									<p class="tips">邮箱：</p>
									<el-input v-model="userMailBox" placeholder="请输入邮箱"></el-input>
								</view>
								<view class="userPassword">
									<p class="tips">密码：</p>
									<el-input placeholder="请输入密码" v-model="userPassword2" size="large" show-password>
									</el-input>
								</view>
								<view class="signIn">
									<el-button type="primary" style="width: 100%;height: 100rpx;" @click="signInMail">登录</el-button>
								</view>
								<view class="signUp">
									<div class="forgetPassword">
									</div>
									<div class="signUpMsg">还没有账号？</div>
									<el-button type="text" class="signUpButton" @click="jumpToRegister">点击注册</el-button>
								</view>
							</el-tab-pane>
						</el-tabs>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeName: 'first',
				userMobile1: '',
				userPassword1: '',
				userMobile2: '',
				userConfirm: '',
				userMailBox: '',
				userPassword2: '',
				confirmButtonMsg: '获取验证码',
				disabled: false,
			};
		},
		methods: {
			// 标签页切换
			handleClick(tab, event) {
				console.log(tab, event);
			},
			//验证码倒数60秒
			tackBtn() {
				let time = 60;
				let timer = setInterval(() => {
					if (time == 0) {
						clearInterval(timer);
						this.confirmButtonMsg = '获取验证码';
						this.disabled = false;
					} else {
						this.disabled = true;
						this.confirmButtonMsg = time + '秒后重试';
						time--;
					}
				}, 1000);
			},
			//登陆成功弹窗
			openSuccessWindow() {
				this.$alert('登录成功', '提示', {
					confirmButtonText: '确定',
					callback: action => {
			
						uni.navigateTo({
							url: "MyGoods"
						})
			
					},
					showClose: false,
				});
			},
			//商户手机密码登录方法
			async signInMobile() {
				const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
				if (this.userMobile1 == '') {
					this.$alert('手机号不能为空！', '错误', {
						confirmButtonText: '确定',

					});
				} else if (!regMobile.test(this.userMobile1)) {
					this.$alert('手机格式不合法！请输入正确的手机号', '错误', {
						confirmButtonText: '确定',

					});
				} else if (regMobile.test(this.userMobile1) && this.userPassword1 == '') {
					this.$alert('密码不能为空', '错误', {
						confirmButtonText: '确定',

					});
				} else if (regMobile.test(this.userMobile1) && this.userPassword1 != '') {
					await this.$axios({
						methods: 'get',

						url: '/Business/LoginByPhone?PhoneNum=' + this.userMobile1 + '&Password=' + this.$md5(
							this
							.userPassword1),

					}).then(res => {
						
						this.judgeIsRight(res.data.code)
						if (this.isAllowed == true) {
							this.$cookies.set("shopName", res.data.date.storeName, "1h")
							this.$cookies.set("shopId", res.data.date.id, "1h")
							this.$cookies.set("shopuuid",res.data.date.uuid,"1h")
							this.openSuccessWindow()
							}
					}).catch(err => {
						
					})
				}
			},

			//商户邮箱密码登录方法
			async signInMail() {
				const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
				if (this.userMailBox == '') {
					this.$alert('邮箱不能为空！', '错误', {
						confirmButtonText: '确定',

					});
				} else if (!regEmail.test(this.userMailBox)) {
					this.$alert('邮箱格式不合法！请输入正确的邮箱', '错误', {
						confirmButtonText: '确定',

					});
				} else if (regEmail.test(this.userMailBox) && this.userPassword2 == '') {
					this.$alert('密码不能为空', '错误', {
						confirmButtonText: '确定',

					});
				} else if (regMobile.test(this.userMailBox) && this.userPassword2 != '') {
					await this.$axios({
						methods: 'get',

						url: '/Business/LoginByEmail?Email=' + this.userMailBox + '&Password=' + this.$md5(this
							.userPassword2)

					}).then(res => {
						
						this.judgeIsRight(res.data.code)
						if (this.isAllowed == true) {
							this.$cookies.set("shopName", res.data.date.name, "1h")
							this.$cookies.set("shopId", res.data.date.id, "1h")
							this.$cookies.set("shopuuid",res.data.date.uuid,"1h")
							this.openSuccessWindow()
							}
					}).catch(err => {
						
					})
				}
			},

			//弹窗打开方法
			openWindow(msg) {
				this.$alert(msg, '登录失败', {
					confirmButtonText: '确定',
				});
			},
			//判断商户输入是否正确方法
			judgeIsRight(code) {
				if (code == 0) {
					this.isAllowed = true
				} else if (code == 10) {
					this.isAllowed = false
					this.failMsg = '您的密码有误'
					this.openWindow(this.failMsg)
				} else if (code == 11) {
					this.isAllowed = false
					this.failMsg = '您的手机号可能未注册或输入有误'
					this.openWindow(this.failMsg)
				} else if (code == 12) {
					this.isAllowed = false
					this.failMsg = '您的邮箱可能未注册或输入有误'
					this.openWindow(this.failMsg)
				}
			},
			//跳转到厂商注册界面
			jumpToRegister() {
				uni.navigateTo({
					url: 'EnterPriseRegister'
				});
			},
			//跳转到用户登录界面
			jumpToUserLogin() {
				uni.navigateTo({
					url: 'UserLoginIndex'
				});
			},
			// 跳转到管理员登陆
			jumpToAdminLogin() {
				uni.navigateTo({
					url: 'AdminloginIndex'
				});
			},
			// 跳转到主界面
			jumpToMain(){
				uni.navigateTo({
					url: "Userindex"
				})
			}
		}
	};
</script>

<style>
	.main {
		display: flex;
		flex-direction: column;
		position: absolute;
		width: 100%;
		float: left;
	}

	.header {
		width: 100%;
		height: 99rpx;
		display: flex;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		position: relative;
		z-index: 10;
	}
	
	.logo {
		margin-left: 5%;
	}
	
	.navitems {
		margin: auto;
		display: flex;
		margin-right: 5%;
	}
	
	.navitem {
		font-size: 15px;
		margin-left: 50rpx;
	}

	.name {
		font-size: 20px;
		position: absolute;
		transform: translateX(-1000rpx);
	}

	.pageTab {
		transform: translateX(1000rpx);
	}

	.content {
		width: 100%;
		height: 600px;
		display: flex;
		background-color: white;
		justify-content: center;
		flex-direction: row;
	}

	.image_container {
		width: 36%;
		display: flex;
	}

	.image_box {
		width: 50%;
		display: flex;
	}

	.image {
		margin-top: 130rpx;
		margin-left: -20rpx;
		width: 1100rpx;
		height: 900rpx;
		display: flex;
	}

	.login_container {
		width: 35%;
		display: flex;
	}

	.login_box {
		background-color: white;
		width: 86%;
		height: 400px;
		margin-top: 200rpx;
		border: 1px solid #EEEEEE;
		border-radius: 10px;
		transform: translateX(80rpx);
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
	}

	.loginName {
		margin-top: 50rpx;
		width: 80%;
		margin-left: 10%;
		transform: translateX(-15rpx);
	}

	.login {
		width: 80%;
		margin-left: 10%;
		margin-top: 30rpx;
	}

	.userMobile {
		height: 150rpx;
	}

	.userPassword {
		height: 200rpx;
	}

	.tips {
		font-family: "Helvetica Neue", Helvetica, "PingFang SC";
		color: #909399;
		font-size: 12px;
	}

	/deep/ .el-input__inner {
		height: 50px;
	}

	.signIn {
		width: 100%;
	}

	.signUp {
		margin-top: 13rpx;
		display: flex;
		align-items: center;
		float: right;
	}

	.signUpMsg {
		font-size: 13px;
	}

	.signUpButton {
		font-size: 13px;
	}

	.forgetPassword {
		float: left;
		transform: translateX(-320rpx);
	}

	.forgetPasswordButton {
		font-size: 13px;
	}

	.userConfirm {
		height: 200rpx;
		align-items: center;
	}
</style>
